<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width, user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
    <title>涵子易的可视化</title>
    <link rel="shortcut icon" href="aa.ico">
    <script src="js/flexible.js"></script>
    <!-- <script src="js/echarts.js"></script> -->
    <script src="js/echarts.min.js"></script>
    <script src="js/jquery.js"></script>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="font/style.css">
    <link rel="stylesheet" href="font/icomoon.css">
    <!-- 模块化管理 -->
    <link rel="stylesheet" href="css/index.css">
    <script src="js/index.js"></script>


</head>

<body>
    <!-- 音乐开关 -->
    <audio src="css/Geoff Knorr - China (The Industrial Era).mp3" id="miscu"></audio>
    <img src="css/mu.png" alt="" class='mu_a'>
    <div class="viewport">

        <div class="column">
            <!-- 数据模块 -->
            <div class="panel overview ">
                <div class="inner">
                    <ul>
                        <li>
                            <h4>2,190</h4>
                            <span><i class="icon-dot" style="color: #006cff"></i>
                                设备总数
                            </span>
                        </li>
                        <li>
                            <h4>190</h4>
                            <span><i class="icon-dot" style="color:#6acca3;"></i>
                                季度新增
                            </span>
                        </li>
                        <li>
                            <h4>3,001</h4>
                            <span><i class="icon-dot" style="color:#6acca3;"></i>
                                运营设备
                            </span>
                        </li>
                        <li>
                            <h4>108</h4>
                            <span><i class="icon-dot" style="color:#ed3f35;"></i>
                                异常设备
                            </span>
                        </li>

                    </ul>

                </div>

            </div>
            <!-- 数据模块结束 -->

            <!-- 监控模块 -->

            <div class="panel monitor">
                <div class="inner ">
                    <div class="monitor_tab">
                        <a href="javascript:;" class="activec">故障设备监控</a>
                        <a href="javascript:;">异常设备监控</a>
                    </div>

                    <div class="monitor_content">
                        <!-- 切换卡1 -->
                        <div class="content">
                            <div class="heand">
                                <span class="col">故障时间</span>
                                <span class="col">设备地址</span>
                                <span class="col">异常代码</span>
                            </div>

                            <div class="marquee-view">
                                <div class="marquee">
                                    <div class="row">
                                        <span class="col">20221201</span>
                                        <span class="col">明故宫</span>
                                        <span class="col">1000001</span>
                                        <span class="icon-dot"></span>
                                    </div>
                                    <div class="row">
                                        <span class="col">20221202</span>
                                        <span class="col">苜蓿园</span>
                                        <span class="col">1000002</span>
                                        <span class="icon-dot"></span>
                                    </div>
                                    <div class="row">
                                        <span class="col">20221203</span>
                                        <span class="col">西安门</span>
                                        <span class="col">1000003</span>
                                        <span class="icon-dot"></span>
                                    </div>
                                    <div class="row">
                                        <span class="col">20221204</span>
                                        <span class="col">大行宫</span>
                                        <span class="col">1000004</span>
                                        <span class="icon-dot"></span>
                                    </div>
                                    <div class="row">
                                        <span class="col">20221205</span>
                                        <span class="col">新街口</span>
                                        <span class="col">1000005</span>
                                        <span class="icon-dot"></span>
                                    </div>
                                    <div class="row">
                                        <span class="col">20221224</span>
                                        <span class="col">幕府西路</span>
                                        <span class="col">1000006</span>
                                        <span class="icon-dot"></span>
                                    </div>
                                    <div class="row">
                                        <span class="col">20221225</span>
                                        <span class="col">汉中门</span>
                                        <span class="col">1000007</span>
                                        <span class="icon-dot"></span>
                                    </div>
                                    <div class="row">
                                        <span class="col">20221226</span>
                                        <span class="col">莫愁湖</span>
                                        <span class="col">1000008</span>
                                        <span class="icon-dot"></span>
                                    </div>
                                    <div class="row">
                                        <span class="col">20221227</span>
                                        <span class="col">云锦路</span>
                                        <span class="col">1000009</span>
                                        <span class="icon-dot"></span>
                                    </div>
                                    <div class="row">
                                        <span class="col">20221230</span>
                                        <span class="col">燕子矶</span>
                                        <span class="col">1000010</span>
                                        <span class="icon-dot"></span>
                                    </div>

                                </div>
                            </div>
                        </div>

                        <!-- 切换卡2 -->
                        <div class="content" style="display:none ;">
                            <div class="heand">
                                <span class="col">异常时间</span>
                                <span class="col">设备地址</span>
                                <span class="col">异常代码</span>
                            </div>

                            <div class="marquee-view">
                                <div class="marquee">
                                    <div class="row">
                                        <span class="col">20230404</span>
                                        <span class="col">月牙湖公园</span>
                                        <span class="col">1000001</span>
                                        <span class="icon-dot"></span>
                                    </div>
                                    <div class="row">
                                        <span class="col">20230404</span>
                                        <span class="col">月牙湖公园</span>
                                        <span class="col">1000001</span>
                                        <span class="icon-dot"></span>
                                    </div>
                                    <div class="row">
                                        <span class="col">20230404</span>
                                        <span class="col">月牙湖公园</span>
                                        <span class="col">1000001</span>
                                        <span class="icon-dot"></span>
                                    </div>
                                    <div class="row">
                                        <span class="col">20230404</span>
                                        <span class="col">月牙湖公园</span>
                                        <span class="col">1000001</span>
                                        <span class="icon-dot"></span>
                                    </div>
                                    <div class="row">
                                        <span class="col">20230404</span>
                                        <span class="col">月牙湖公园</span>
                                        <span class="col">1000001</span>
                                        <span class="icon-dot"></span>
                                    </div>
                                    <div class="row">
                                        <span class="col">20230404</span>
                                        <span class="col">月牙湖公园</span>
                                        <span class="col">1000001</span>
                                        <span class="icon-dot"></span>
                                    </div>
                                    <div class="row">
                                        <span class="col">20230404</span>
                                        <span class="col">月牙湖公园</span>
                                        <span class="col">1000001</span>
                                        <span class="icon-dot"></span>
                                    </div>
                                    <div class="row">
                                        <span class="col">20230404</span>
                                        <span class="col">月牙湖公园</span>
                                        <span class="col">1000001</span>
                                        <span class="icon-dot"></span>
                                    </div>
                                    <div class="row">
                                        <span class="col">20230404</span>
                                        <span class="col">月牙湖公园</span>
                                        <span class="col">1000001</span>
                                        <span class="icon-dot"></span>
                                    </div>
                                    <div class="row">
                                        <span class="col">20230404</span>
                                        <span class="col">月牙湖公园</span>
                                        <span class="col">1000001</span>
                                        <span class="icon-dot"></span>
                                    </div>
                                    <div class="row">
                                        <span class="col">20230404</span>
                                        <span class="col">月牙湖公园</span>
                                        <span class="col">1000001</span>
                                        <span class="icon-dot"></span>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 监控模块结束 -->

            <!-- 点位分布开始 -->
            <div class="point panel">
                <div class="inner ">
                    <h3>点位分布统计</h3>
                    <div class="point_chart">
                        <div class="pie"></div>
                        <div class="data">
                            <div class="item">
                                <h4 class="">320,11</h4>
                                <span>
                                    <i class="icon-dot" style="color: #ed3f35"></i>
                                    点位总数
                                </span>
                            </div>
                            <div class="item">
                                <h4>418</h4>
                                <span>
                                    <i class="icon-dot" style="color: #eacf19"></i>
                                    本月新增
                                </span>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <!-- 点位分布结束 -->
        </div>


        <div class="column">

            <!-- 地图开始 -->
            <div class="map">
                <h3>
                    <span class="icon-cube" style='color: #68d8fe;'></span>
                    南京航线统计
                </h3>
                <div class="chart">
                    <div class="geo"> </div>
                </div>
            </div>
            <!-- 地图结束 -->

            <!-- user区域开始 -->
            <div class="panel user">
                <div class="inner">
                    <h3>全国用户总量统计</h3>
                    <div class="user_chart">
                        <div class="bar">1</div>
                        <div class="data">
                            <div class="item">
                                <h4>120,899</h4>
                                <span>
                                    <i class="icon-dot" style="color: #ed3f35"></i>
                                    用户总量
                                </span>
                            </div>
                            <div class="item">
                                <h4>248</h4>
                                <span>
                                    <i class="icon-dot" style="color: #eacf19"></i>
                                    本月新增

                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- user区域结束 -->
        </div>

        <div class="column">

            <!-- 盒子3tab栏切换 -->
            <div class="panel order">
                <div class="inner">
                    <div class="filter">
                        <a href="javascript:;" class='order_blue'>365天</a>
                        <a href="javascript:;">90天</a>
                        <a href="javascript:;">30天</a>
                        <a href="javascript:;">24小时</a>
                    </div>
                    <div class="order_content">
                        <div class="order_data">
                            <div class="data">
                                <div class="item">
                                    <h4>20,301,987</h4>
                                    <span>
                                        <i class="icon-dot" style="color: #ed3f35;"></i>
                                        订单量
                                    </span>
                                </div>
                                <div class="item">
                                    <h4>99834</h4>
                                    <span>
                                        <i class="icon-dot" style="color:#eacf19;"></i>
                                        销售额（万元）
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="order_data">
                            <div class="data">
                                <div class="item">
                                    <h4>5,005,969</h4>
                                    <span>
                                        <i class="icon-dot" style="color: #ed3f35;"></i>
                                        订单量
                                    </span>
                                </div>
                                <div class="item">
                                    <h4>24616</h4>
                                    <span>
                                        <i class="icon-dot" style="color:#eacf19;"></i>
                                        销售额（万元）
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="order_data">
                            <div class="data">
                                <div class="item">
                                    <h4>1,668,656</h4>
                                    <span>
                                        <i class="icon-dot" style="color: #ed3f35;"></i>
                                        订单量
                                    </span>
                                </div>
                                <div class="item">
                                    <h4>8205</h4>
                                    <span>
                                        <i class="icon-dot" style="color:#eacf19;"></i>
                                        销售额（万元）
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="order_data">
                            <div class="data">
                                <div class="item">
                                    <h4>18,540</h4>
                                    <span>
                                        <i class="icon-dot" style="color: #ed3f35;"></i>
                                        订单量
                                    </span>
                                </div>
                                <div class="item">
                                    <h4>273</h4>
                                    <span>
                                        <i class="icon-dot" style="color:#eacf19;"></i>
                                        销售额（万元）
                                    </span>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <!-- 销售额统计区域 -->
            <div class="panel sales ">
                <div class="inner">
                    <div class="caption">
                        <h3>销售额统计</h3>
                        <a href="javascript:;" class="active" data-type="year">年</a>
                        <a href="javascript:;" data-type="quarter" class="">季</a>
                        <a href="javascript:;" data-type="month" class="">月</a>
                        <a href="javascript:;" data-type="week" class="">周</a>
                    </div>
                    <div class="chart">
                        <div class="lable" id='w'>单位：万</div>
                        <div class="line"></div>
                    </div>
                </div>

            </div>
            <!-- 2小盒子雷达 -->
            <div class="wrap">
                <!-- 雷达盒子 -->
                <div class="panel channel">
                    <div class="inner">
                        <h3>渠道分布</h3>
                        <div class="chart">
                            <div class="radar"></div>
                        </div>
                    </div>
                </div>
                <!-- 速度图区域 -->
                <div class="panel quarter">
                    <h5>60%</h5>
                    <div class="inner">
                        <h3>一季度销售进度</h3>

                        <div class="chart">

                            <div class="box">

                            </div>
                            <div class="data">
                                <div class="item">
                                    <h4>1,321</h4>
                                    <span>
                                        <i class="icon-dot" style="color: #6acca3"></i>
                                        销售额(万元)
                                    </span>
                                </div>
                                <div class="item">
                                    <h4>160%</h4>
                                    <span>
                                        <i class="icon-dot" style="color: #ed3f35"></i>
                                        同比增长
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 全国热搜 -->
            <div class="top panel">
                <div class="inner">
                    <div class="all">
                        <h3>全国热榜</h3>
                        <ul>
                            <li>
                                <i class="icon-cup1" style="color: #d93f36;"></i>
                                肯德基
                            </li>

                            <li>
                                <i class="icon-cup2" style="color:#eacf19;"></i>
                                麦当劳
                            </li>
                            <li><i class="icon-cup3" style="color: #4c9bfd;"></i>
                                汉堡王
                            </li>
                        </ul>
                    </div>
                    <div class="province">
                        <h3>各省热销
                            <i class="date">// 近30日 //</i>
                        </h3>
                        <div class="data">
                            <ul class="sup">
                                <!-- <li class=""><span>北京</span><span> 25, 179 <s class="icon-up"></s></span></li>
                                <li class=""><span>河北</span><span> 23,252 <s class="icon-down"></s></span></li>
                                <li class=""><span>上海</span><span> 20,760 <s class="icon-up"></s></span></li>
                                <li class=""><span>江苏</span><span> 23,252 <s class="icon-down"></s></span></li>
                                <li class=""><span>山东</span><span> 20,760 <s class="icon-up"></s></span></li> -->
                            </ul>
                            <ul class="sub">
                                <!-- <li><span>可爱多</span><span> 2,156<s class="icon-down"></s></span></li>
                                <li><span>娃哈哈</span><span> 2,456<s class="icon-up"></s></span></li>
                                <li><span>喜之郎</span><span> 9,737<s class="icon-up"></s></span></li>
                                <li><span>八喜</span><span> 2,080<s class="icon-up"></s></span></li>
                                <li><span>小洋人</span><span> 8,724<s class="icon-up"></s></span></li>
                                <li><span>好多鱼</span><span> 1,770<s class="icon-down"></s></span></li> -->

                            </ul>
                        </div>
                    </div>
                </div>
            </div>


        </div>
    </div>
</body>
<script src="js/china.js"></script>
<script>

</script>

</html>